<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#box{
		width: 150px;
		height: 200px;
		background: green;
		position: absolute;
	}
</style>
<script type="text/javascript">
	window.onload = function(){

		// 抓常用元素
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		var speed = 1;
		// 给按钮加单击事件
		btn.onclick = function(){
			// 设置定时器，控制元素top值变化
			setInterval(function(){
				speed++;
				// 获得当前top值
				var old_left = box.style.left;
				// 计算新的top值
				var new_left = parseInt(old_left)+speed;
				// 将新值赋值回去
				box.style.left = new_left+'px';
			},100)
		}

	}



</script>
</head>

<body>

<input type="button" value="点我" id="btn" />
<br /><br />
<div id="box" style="top:40px;left:0px;"></div>



</body>
</html>
